<template>
  <div class="son1">
    <!-- 定义具名插槽 -->
    <slot name="top"></slot>
    <h2>Son1</h2>
    <div>姓名:{{ myName }}</div>
    <div>年龄:{{ myAge }}</div>
    <div>性别:{{ mySex }}</div>
    <div><button @click="updateData">修改数据</button></div>
    <!-- 可以通过插槽传递一份数据给插槽的使用者，这样的插槽成为：作用域插槽 -->
    <slot name="bottom" :car="car"></slot>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "Son1",
  //接收父组件的传值
  props: ["name", "age"],
  //setup的第一个参数，用于获取父组件的传值
  //注意：props选项接收了几个参数，setup函数的第一个参数就只能获取几个参数。
  //setup的第二个参数，是一个上下文对象；它里面一个方法是emit，用于触发自定义事件
  //props选项没有接收的传值，在setup里面通过上下文对象的attrs属性接收
  setup(props, { emit, attrs, slots }) {
    // slots对象返回的是插槽里面的虚拟DOM信息
    // 什么是虚拟DOM，就是vue实例所能识别的一个DOM信息对象。
    console.log(slots.top());
    //中转props里面的数据，因为props是只读的
    //   console.log(isReadonly(props)); //true
    let myName = ref(props.name);
    let myAge = ref(props.age);
    let mySex = ref(attrs.sex);
    let car = reactive({
      name: "奔驰",
      price: 20,
    });
    let updateData = () => {
      myName.value = "李四";
      myAge.value = 30;
      mySex.value = "女";
      //触发自定义事件
      emit("updateData", {
        myName: myName.value,
        myAge: myAge.value,
        mySex: mySex.value,
      });
    };
    return {
      myName,
      myAge,
      mySex,
      updateData,
      car,
    };
  },
};
</script>